/* Form styles.
 * Gives form elements a consistent look across the portal.
 * Pass in the desired type of form based on the context.
 */

/* Use variables to store selectors. */
$form-elements: "input[type='text'], input[type='email'], input[type='tel'], input[type='url'], input[type='search'], input[type='password']";
$form-select: "select";
$form-textarea: "textarea";
$form-elements-focus: "select:focus, input[type='text']:focus, input[type='email']:focus, input[type='tel']:focus, input[type='url']:focus, input[type='search']:focus, input[type='password']:focus, select:focus, textarea:focus";

/* Apply baseline form element styling. */
.up {
	form {
		#{$form-elements}, #{$form-select}, #{$form-textarea} {
			font-family		: $formElementFont;
			border			: $formElementBorder;
			font-size		: $formElementFontSize;
		}
		
		#{$form-elements}, #{$form-textarea} {
			padding			: $formElementPadding;
			line-height		: $formElementLineHeight;
			background		: $formElementBackground;
			box-shadow		: $formElementBoxShadow;
			@if ($formElementRound != false) {
				@include rounded($formElementRound);
			}
		}
		
		#{$form-select} {
			padding: $formSelectPadding;
			@if ($formSelectRound != false) {
				@include rounded($formSelectRound);
			}
		}
		
		#{$form-elements-focus} {
			@include box-shadow($formElementFocus);
			outline			: none;
		}
	}
}